<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="Author" content="Jenny.Zhan">
  <meta name="format-detection" content="telephone=no" />
  <title>素材管理</title>
  <link rel="stylesheet" href="<{$ipath}>alipay/css/base.css">
  <link rel="stylesheet" href="<{$ipath}>alipay/css/layout.css">

<script src="<{$ipath}>alipay/js/jquery-1.7.1.min.js"></script>
<script src="<{$ipath}>wx/js/ajaxfileupload.js"></script>
<script src="<{$baseurl}>lib/kdeditor/kindeditor.js"></script>
<script src="<{$baseurl}>lib/kdeditor/lang/zh_CN.js" type="text/javascript"></script>
<script src="<{$baseurl}>lib/kdeditor/plugins/code/prettify.js" type="text/javascript"></script>

<script>var K=window.KindEditor;</script>
</head>
<body>
	<div class="section-cont">
		<h1 class="fn-title">单图文广播</h1>
		<div class="title-btn fr"><a href="?g=alipay&m=fodder&a=index" class="btn btn-gray">返&nbsp;&nbsp;回</a></div>
		
		<div class="main-edit cl">
			<div class="left-show fl" id="messageList">
				<ul id="J_showCont" class="show-cont ui-sortable">
					<li class="first-item state-disabled singleMsgItem" id="item_0">
						<!--单图特有结构 singleMsgMode-->
						<div class="singleMsgMode">
							<h1 data-default="标题" data-title="title" class="singlemessage-show-title J_change_title"><{$data.title}></h1>
							<div data-default="封面图片" data-image="image" class="cover-pic J_change_image">
								<{if $data.img_url }><img src="<{$data.img_url}>" /><{else}>封面图片<{/if}>
							</div>
							<div data-default="" data-description="description" class="article-description J_change_description"></div>
							<div data-default="立即查看" data-hrefname="hrefName" class="goview singleMsgMode J_change_hrefName">立即查看</div>
						</div>
						<!--单图特有结构 singleMsgMode END-->
					</li>
				</ul>
			</div>
			<div class="edit-right fl">
				<div class="arrow-icon" title="箭头"></div>
				<form data-role="form" id="J_articleform" enctype="multipart/form-data">
					<dl class="edit-cont">
						<dt class="edit-title">标题</dt>
						<dd class="cl">
							<div class="input-container input-container-left">
								<input type="text" class="edit-input" placeholder="最多可输入32个字" maxlength="32" id="J_enter_title" data-name="title" value="<{$data.title}>"/>
								<div class="form-validate-tip form-validate-tip-botm cl">
									<div class="form-explain fl dn">请填写标题</div>
									<div class="form-left-words fr dn">还可输入<span class="form-left-words-number">32</span>个字
									</div>
								</div>
							</div>
						</dd>
						<dt class="edit-title cl">封面</dt>
						<dd class="cl upload-valid-item">
							<div class="uploadImgBox hide-upload-dom" id="J_uploadImgBox">
								<div class="upload-photo fl" id="uploadPhotoWrap" title="+上传">
									<div id="J_uploadPhoto" class="uploadify" style="height: 98px; width: 198px;">
										<div class="uploadify-button"><span class="uploadify-button-text">
											<{if $data.img_url }><img src="<{$data.img_url}>" /><{else}>+上传<{/if}>
											</span><input type="file" name="uploadimg" id="uploadimg1" onchange="uploadimgs(1)" class="dn"></div>
									</div>
								</div>
							</div>
							<div class="fl note-word">建议尺寸 <span id="uploadImgWidth"></span> x <span id="uploadImgHeight"></span>px，支持 .jpg .jpeg .png 格式，小于3M。</div>
							<!--图片地址隐藏域-->

							<!--图片上传参数-->
							<div class="form-validate-tip cl upfile">
								<div class="form-explain fl dn">请上传封面</div>
							</div>
						</dd>
						<!--单图特有结构 singleMsgMode-->
						<dt class="edit-title single-msg-item singleMsgMode">摘要（选填）</dt>
						<dd class="single-msg-item input-container singleMsgMode" style="position: relative;">
							<input class="edit-input edit-article-content" maxlength="120" placeholder="最多可输入120个字" value="<{$data.abstract}>"/>
							<div class="form-validate-tip form-validate-tip-botm cl">
								<div class="form-explain fl dn">摘要不能包含以下字符 &lt; &gt; </div>
								<div class="form-left-words fr dn">还可输入<span class="form-left-words-number">120</span>个字
								</div>
							</div>
						</dd>
						<!--单图特有结构 singleMsgMode END-->
						<dt class="edit-title">详情</dt>
						<dd class="msg-content-tab-container">		                            
							<div class="transfers-box dn" id="J_articleUrl">
								<!--单图特有结构 singleMsgMode-->
								<div class="input-container input-link-name-container singleMsgMode">
									<p class="link-word">链接名称</p>
									<input class="link-name edit-input" id="J_enter_hrefName" type="text" value="立即查看"
										   maxlength="8" data-defaultval="立即查看"/>
									<div class="form-validate-tip form-validate-tip-botm cl" style="width: 86%">
										<div class="form-left-words fr dn">
											还可输入<span class="form-left-words-number">8</span>个字
										</div>
									</div>
								</div>
								<!--单图特有结构 singleMsgMode END-->
								<div class="input-container">
									<p class="link-word">链接地址</p>
									<input class="link-content edit-input" id="J_enter_url" type="text" value=""/>
									<--!<div class="form-validate-tip form-validate-tip-botm cl">
										<div class="form-explain fl dn">请填写正确的链接地址</div>
									</div>-->
								</div>  
							</div>
							<!--富文本编辑器-->
							<textarea type="text" name="intro1" id="content1" class="div_textarea"><{$data.content}></textarea>
							<div class="form-validate-tip form-validate-tip-botm dn">
									<div class="form-explain fl">请填写内容</div>
								</div>
							<script>K.create("#content1",{height:"300px",cssPath:"<{$baseurl}>lib/kdeditor/plugins/code/prettify.css",uploadJson:"<{$baseurl}>lib/kdeditor/php/upload_json.php",fileManagerJson:"<{$baseurl}>lib/kdeditor/php/file_manager_json.php",allowFileManager:true,afterBlur: function(){this.sync();checkcontent();}});</script>
							<!--富文本编辑器 END-->
					   </dd>  
					                   
					</dl>
				</form>
			</div>
		</div>
		<div class="edit-btn">
			<a href="javascript:;" class="save-btn btn btn-orange" id="J_saveBtn">
				保&nbsp;&nbsp;存
			</a>
			<!--<a href="" class="preview-btn btn btn-gray" id="J_previewBtn">预&nbsp;&nbsp;览</a>-->
		</div>
	</div>
	<form action="?g=alipay&m=fodder&a=add" method="post" id="msgForm">
		<input id="msgArticles" name="title" type="hidden" value='<{$data.title}>'/><!--标题-->
		<input id="imgurl" name="img_url" type="hidden" value='<{$data.img_url}>'/>
		<!--<input id="msgId" name="materialId" type="hidden" value=''/>-->
		<input id="msgModeMark" name="type" type="hidden" value='1'/> <!--图文类型-->
		<input id="msgDes" name="abstract" type="hidden" value="<{$data.abstract}>"/><!--摘要-->
		<input id="msgContent" name="content" type="hidden" value=""/><!--详情-->
		<input id="" name="id" type="hidden" value="<{$data.id}>"/><!--图文id-->
	</form>

	<script>
		function checktitle(){
			var title = $('#J_enter_title');

			if ($.trim(title.val())== ''){
				title.next().find('div').removeClass('dn');
				//alert('f');
				return false;
			}else{
				title.next().find('div').addClass('dn');
				//alert('t');
				return true;
			}
		}
		function checkimg(){
			var img = $('#imgurl');
			if (img.val()==''){
				$('.upload-valid-item').find('div').removeClass('dn');
				return false;
			}
            //else{
			//	$('.upload-valid-item').find('div').addClass('dn');
			//	return true;
			//}
		}
		function checkcontent(){
			var con = $('#content1');
			if ($.trim(con.val())== ''){
				con.siblings('.form-validate-tip').removeClass('dn');
				//alert('f');
				return false;
			}else{
				con.siblings('.form-validate-tip').addClass('dn');
				//alert('t');
				return true;
			}
		}
		
		function uploadimgs(n){
	        var url = "?g=alipay&m=fodder&a=ajaxup";
	        $.ajaxFileUpload({
	            url:url,
	            dataType:'json',
	            fileElementId:'uploadimg'+n,
	            type:'post',
	            secureuri:false,
	            success:function(data){
					//console.log(data);
					if(data.status==1){
						//alert('上传成功');
	                    $('.uploadify-button-text').html('<img src="'+ data.msg +'">');
	                    $('.cover-pic').html('<img src="'+ data.msg +'">');
	                    $('#imgurl').val("'"+ data.msg +"'");
						$('.upfile').find('div').addClass('dn');
	                }else{
	                    alert(data.msg);
	                    return false;
	                }
	            }
	        });
		}
		$(function(){
		    $(".uploadify-button-text").click(function(){
				$("#uploadimg1").trigger("click");
			});
			$('#J_saveBtn').click(function(){
                var iserror= false;
                var title = $('#J_enter_title');
                if ($.trim(title.val())== ''){
                    title.next().find('div').removeClass('dn');
                    iserror= true;
                }
                var img = $('#imgurl');
                if (img.val()==''){
                    $('.upload-valid-item').find('div').removeClass('dn');
                    iserror=true;
                }
                var con = $('#content1');
                if ($.trim(con.val())== ''){
                    con.siblings('.form-validate-tip').removeClass('dn');				
                    iserror=true;
                }
                if (!iserror){
                    $('#msgContent').val($('#content1').val());
                    $('#msgForm').submit();
                }
			});
			$('#J_enter_title').keyup(function(){
				checktitle();
				$('.J_change_title').html($(this).val());
				$('#msgArticles').val($(this).val());
			});
			$('.edit-article-content').keyup(function(){				
				$('.J_change_description').html($(this).val());
				$('#msgDes').val($(this).val());
			});

	    });

	</script>

</body>
</html>